<template>
  <div class="param-main">
      <el-form
      ref="tblMain"
      :model="serachForm"
      labelPosition="right"
      inline=""
      label-suffix=":"
      label-width="110px"
    >
      <el-row :span="24">
        <el-col :span="8">
          <el-form-item label="员工姓名">
             <el-input
              v-model="serachForm.empName"
              size="small"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="page-pane2">
        <el-button type="primary" size="small" @click="getExamApplyList()"
          >查询</el-button
        >
        <el-button size="small" @click="dataReset()">清空</el-button>
      </div>
    </el-form>
    <div style="height: calc(100% - 200px)">
      <el-table
        ref="tblMain"
        style="margin-top: 20px"
        :data="listData"
        height="100%"
        @selection-change="handleSelectionChange"
        v-loading.body="loading"
        border
        stripe
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          width="50"
          label="序号"
          align="center"
        ></el-table-column>
         <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button  type="text" v-if="scope.row.state == '1'" @click="detailTblMain(2,scope.row)">通过</el-button>
            <el-divider direction="vertical" v-if="scope.row.state == '1'"></el-divider>
            <el-button  type="text" v-if="scope.row.state == '1'" @click="detailTblMain(3,scope.row)">驳回</el-button>
            <el-divider direction="vertical" v-if="scope.row.state == '1'" ></el-divider>
            <el-button  type="text" @click="detailTblMain(0,scope.row)">明细</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="empName" label="退出申请人" align="center">
          <template slot-scope="scope">
            <span >{{ scope.row.empName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="leaveDate" label="退出时间" align="center">
          <template slot-scope="scope">
            <span >{{ scope.row.leaveDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="leaveReason" label="退出原因" align="center">
          <template slot-scope="scope">
            <span >{{ scope.row.leaveReason }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center"
        >
        <template slot-scope="scope">
            <span> {{ formatterFiled(scope.row.state,'code','name',stateList) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="margin-top: 10px"
      :current-page.sync="pageInfo.page"
      :page-size="pageInfo.size"
      :total="pageInfo.total"
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <exam-apply-detail
       ref="ExamApplyDetail"
      v-if="visible"
      @cancle="cancle"
      :stateList="stateList"
      :title="title"
      :row="rowData"
      @ok="examApply">
    </exam-apply-detail>
  </div>
</template>
<script>
import {
  examApply,
  getExamApplyList
} from '@/api/businessCo'
import ExamApplyDetail from './examApplyDetail.vue'
export default {
  name: 'applyMain',
  props: ['pageData'],
  components: {
    ExamApplyDetail
  },
  data() {
    return {
      visible: false,
      loading:false,
      rowData: {},
      title: '',
      selection:[],
      listData: [],
      serachForm: {
        empName: '',
      },
      examApplyType:"",
      pageInfo: {
        page: 1,
        size: 10,
        total: 0
      },
      stateList: [
        {
          code: '0',
          name: '未提交',
        },
        {
          code: '1',
          name: '待审批',
        },
        {
          code: '2',
          name: '审批通过',
        },
        {
          code: '3',
          name: '驳回',
        },
      ],
    }
  },
  watch: {},
  mounted() {
    this.getExamApplyList()
  },
  methods: {
    /**
     * 获取码值
     */
    formatterFiled(cellValue,key,val,list) {
      let item = list.find((item) => item[key] === cellValue)
      return item ? item[val] : ''
    },
    /**
     * 获取交接项列表信息
     */
    getExamApplyList() {
        let data = {
          page: this.pageInfo.page,
          size: this.pageInfo.size,
          ...this.serachForm
        }
        this.loading = true
        getExamApplyList(data).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.loading = false
            this.listData = data.record;
            this.pageInfo.total = data.total
          } else {
            this.$message.error(data)
          }
        }).catch(() => {
          this.$message.error('服务器繁忙')
          this.loading = false
        })
    },
    /**
     * 点击功能按钮
     */
    detailTblMain(type,row) {
      if (type == 0) {
        this.title = '审核详情';
      } else {
        this.title = '审核';
        this.examApplyType = type
      }
      this.rowData = JSON.parse(JSON.stringify(row))
      this.visible = true
    },
    examApply(remark){
      let data ={
          applyId: this.rowData.id,
          state: this.examApplyType,
          remark
        }
        examApply(data).then(res=>{
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getExamApplyList();
            this.cancle()
          } else {
            this.$message({
              type: 'error',
              message: '操作失败!'
            })
          }
        })
    },
    /**
     * 关闭弹框
     */
    cancle() {
      this.visible = false
    },
     /**
     * 多选
     */
     handleSelectionChange(val) {
      this.selection = val
    },
     /**
     * 重置
     */
     dataReset() {
      this.pageInfo.page = 1
      this.pageInfo.size = 10
      this.serachForm.name = ''
      this.getExamApplyList()
    },
     /**
     * 分页
     */
     handleSizeChange(val) {
      this.pageInfo.size = val
      this.getExamApplyList()
    },
    /**
     * 分页
     */
    handleCurrentChange(val) {
      this.pageInfo.page = val
      this.getExamApplyList()
    },
  }
}
</script>
<style scoped lang="scss">
</style>
